<template>
	<view>
		<tn-nav-bar :isBack='false' :backTitle='" "' bottomShadow :alpha="alpha" customBack>
			<view class="tn-flex tn-flex-col-center">
				<view class="tn-flex tn-flex-col-center tn-flex-row-center" style="width: 160rpx;padding-left: 30rpx;"
					@click="open">
					<view class="addr tn-text-ellipsis">
						{{city.fullname}}
					</view>
					<text class="tn-icon-down-triangle" style="color: #000000;"></text>
				</view>
				<view class="sosuo" :style="{background:alpha?'#FEFEFE':'#F7F8F8',width:w}">
					<image src="/static/shop/sousuo.png" class="sosuo__icon" mode=""></image>
					搜索关键词
				</view>
				<view class="" style="width: 2rpx;" slot="right">

				</view>
			</view>
		</tn-nav-bar>
		<image src="/static/product/topbg.png" class="topbg" mode=""></image>
		<loading v-if="loading"></loading>
		<view class="" v-else>
			<view :style="{paddingTop: vuex_custom_bar_height + 'px'}" class="con">
				<!-- 轮播图 -->
				<view class="" style="padding: 0 30rpx;">
					<view class="swp">
						<tn-swiper :list="list" :height='304' :radius='30' mode='none'></tn-swiper>
					</view>
				</view>
				<!-- 类型 -->
				<view class="fxlist">
					<view class="fxlist__item" v-for="(item,index) in categorylist" :key="index" hover-class="tn-hover"
						@click="clickto(item)">
						<image :src="URL(item.image)" class="fxlist__item__icon" mode=""></image>
						<view class="fxlist__item__text">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 公告 -->
				<view class="" style="margin-top: 35rpx;padding: 0 30rpx;">
					<!-- <uni-notice-bar scrollable single :text="list1"></uni-notice-bar> -->
					<tn-notice-bar v-if="list1[0]" :list="list1" mode="horizontal" :radius='10' padding='17rpx 26rpx'
						rightIcon backgroundColor="#f4fff7" :leftIcon="false" fontColor="#473E3C"
						:fontSize='24'></tn-notice-bar>
				</view>
			</view>
			<view class="list">
				<view class="list__jdbox">
					<view class="list__jdbox__tab">
						<view class="list__jdbox__tab__item" @click="getlist('type',2,'')">
							<image src="/static/home/rm.png" class="list__jdbox__tab__item__rm" mode=""></image>
							热门景点
						</view>
						<view class="list__jdbox__tab__line">

						</view>
						<view class="list__jdbox__tab__item" @click="getlist('type',3,'')">
							<image src="/static/home/bd.png" class="list__jdbox__tab__item__bd" mode=""></image>
							本地景点
						</view>
					</view>
					<scroll-view scroll-x="true" class="list__jdbox__sc">
						<view class="tn-flex tn-flex-center">
							<view class="list__jdbox__sc__item" v-for="(item,index) in typelist" :key="index"
								@click="to('/pages/project/details?id='+item.id)">
								<view class="list__jdbox__sc__item__picbox">
									<image :src="URL(item.image)" class="list__jdbox__sc__item__pic"
										mode="aspectFill">
									</image>
									<view class="list__jdbox__sc__item__picbox__b">
										{{item.day}}天·{{item.pod}}出发
									</view>
								</view>
								<view class="list__jdbox__sc__item__name tn-text-ellipsis">
									{{item.title}}
								</view>
								<view class="list__jdbox__sc__item__price">
									<text class="unit">￥</text> {{item.price}} <text class="qi">起</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

				<!-- <product-item v-for="(item,index) in 8" :key="index"></product-item> -->
			</view>
			<view class="">
				<scroll-view scroll-x="true" class="tabsc">
					<view class="tab">
						<view class="tab__item" v-for="(item,index) in tablist" :key="index"
							:class='curtab==index?"active":""' @click="curtab=index,getlist('region','',item.id)">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
				<view class="projiectlist">
					<project-item :item='item' v-for="(item,index) in regionlist" :key="index"></project-item>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import home from '@/api/_home.js'
	let QQMapWX = require('@/utils/qqmap-wx-jssdk.min.js')
	let qqmapsdk
	export default {
		name: 'home',
		props: {
			alpha: {
				default: true,
				type: Boolean
			},
			city: {
				default: {
					code: "",
					name: "定位中"
				},
				type: Object
			},
			result: {
				default: {},
				type: Object
			}
		},
		computed: {
			// 兼容小程序
			gridItemWidth() {
				return 100 / this.col + '%'
			}
		},
		data() {
			return {
				curtab: 0,
				categorylist: [],
				// 当前选择的城市
				// 热门城市
				tablist: [],
				list: [],
				list1: [''],
				typelist: [],
				regionlist: [],
				w: 'calc(720rpx - 124rpx)',
				loading: true
			};
		},
		created() {
			// 获取胶囊信息
			// #ifdef MP-WEIXIN
			let custom = wx.getMenuButtonBoundingClientRect()
			// console.log(custom)
			this.w = `calc(${custom.left}px - 30rpx - 124rpx)`
			// #endif
			// 获取init

			// home.initData().then(res => {
			// 	if (res.data.code == 1) {
			// 		this.categorylist = res.data.data.category
			// 		res.data.data.banner.map(t => {
			// 			this.list.push({
			// 				image: this.URL(t.images)
			// 			})
			// 		})
			// 		this.list1[0] = res.data.data.systemNotice
			// 		this.tablist = res.data.data.region
			// 		this.getlist('type', 2, '')
			// 		this.getlist('region', '', res.data.data.region[0].id)
			// 		this.$forceUpdate()
			// 	}
			// })
		},
		methods: {
			// 点击城市选项
			select(city) {
				this.city = city;
			},
			clickto(item) {
				if (item.name == '机票车次') {
					wx.navigateToMiniProgram({
						shortLink: '#小程序://去哪儿旅行订酒店机票火车票门票/4oiVMGmlyHf7Aws',
						//develop开发版；trial体验版；release正式版
						envVersion: 'release',
						success(res) {
							// 打开成功
							console.log("跳转小程序成功！", res);
						}
					})
				}else if (item.name == '酒店住宿') {
					wx.navigateToMiniProgram({
						shortLink: '#小程序://飞猪/AHXvCeMKsE3DNRB',
						//develop开发版；trial体验版；release正式版
						envVersion: 'release',
						success(res) {
							// 打开成功
							console.log("跳转小程序成功！", res);
						}
					})
				}else{
					this.to('/pages/project/category?id=' + item.id + '&title=' + item.name)
				}
				
				
			},
			// 打开城市选择页面
			open() {
				const key = 'MP7BZ-4WSRA-2D4KD-COLE5-CXFLT-E6BWO'; // 使用在腾讯位置服务申请的key
				const referer = '飞象云游'; // 调用插件的app的名称
				const hotCitys = ''; // 用户自定义的的热门城市

				wx.navigateTo({
					url: `plugin://citySelector/index?key=${key}&referer=${referer}&hotCitys=${hotCitys}`,
				})
			},
			getlist(who, type, region_id) {
				let type1 = type
				if (who == 'region') {
					type1 = ''
				}
				home.getScene({
					type: type1,
					region_id,
				}).then(res => {
					if (res.data.code == 1) {
						res.data.data.map(t => {
							t.imgs = t.images.split(',').filter(Boolean)
						})
						if (who == 'type') {
							this.typelist = res.data.data

							// console.log(this.typelist)
						}
						if (who == 'region') {
							this.regionlist = res.data.data
						}

					}
				})
			},

		},
		watch: {
			result: {
				handler(newresult, oldresult) {
					if (newresult.data) {
						this.categorylist = newresult.data.data.category
						this.list=[]
						newresult.data.data.banner[0].images.split(',').filter(Boolean).map(t => {
							this.list.push({
								image: this.URL(t)
							})
						})
						this.list1[0] = newresult.data.data.systemNotice
						this.tablist = newresult.data.data.region
						this.getlist('type', 2, '')
						this.getlist('region', '', newresult.data.data.region[0].id)
						this.loading = false
						this.$forceUpdate()
					}
				},
				immediate: true,
				deep: true
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8F8;
	}

	.sosuo {
		width: calc(690rpx - 124rpx);
		height: 73rpx;
		background: #FEFEFE;
		border-radius: 37rpx;
		// margin-left: 10rpx;	
		display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #979797;
		line-height: 28rpx;

		&__icon {
			width: 30rpx;
			height: 30rpx;
			margin-left: 37rpx;
			margin-right: 13rpx;
		}
	}

	.con {
		padding: 30rpx 0;
		margin-top: 23rpx;
		background-color: #fff;
	}

	.swp {
		box-shadow: 0rpx 7rpx 32rpx 0rpx rgba(2, 102, 44, 0.28);
		border-radius: 30rpx;
	}

	.list {
		padding: 28rpx;
		background-color: #f7f7f9;

		&__jdbox {
			width: 694rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 40rpx 18rpx;

			&__tab {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 50rpx;

				&__item {
					font-family: PingFang SC;
					font-weight: 800;
					font-size: 31rpx;
					color: #2C2C2C;
					line-height: 31rpx;
					width: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					&__rm {
						width: 39rpx;
						height: 39rpx;
					}

					&__bd {
						width: 36rpx;
						height: 36rpx;
						margin-right: 2rpx;
					}
				}

				&__line {
					width: 2rpx;
					height: 31rpx;
					background: #E4E4E4;
				}
			}

			&__sc {
				width: 658rpx;

				&__item {
					margin-right: 14rpx;

					&__picbox {
						width: 280rpx;
						height: 207rpx;
						background: #EFEFEF;
						border-radius: 22rpx;
						overflow: hidden;
						position: relative;

						&__b {
							width: 280rpx;
							height: 42rpx;
							background: rgba(32, 32, 32, .2);
							font-family: PingFang SC;
							font-weight: 500;
							font-size: 23rpx;
							color: #FFFFFF;
							line-height: 42rpx;
							padding-left: 16rpx;
							position: absolute;
							bottom: 0;
							left: 0;
						}
					}

					&__pic {
						width: 280rpx;
						height: 207rpx;
						background: #EFEFEF;
						border-radius: 22rpx;
						position: absolute;
						top: 0;
						left: 0;

					}

					&__name {
						width: 280rpx;
						height: 29rpx;
						font-family: PingFang SC;
						font-weight: 800;
						font-size: 30rpx;
						color: #2F2F2F;
						line-height: 30rpx;
						padding: 0 13rpx;
						margin-bottom: 23rpx;
						margin-top: 18rpx;
					}

					&__price {
						font-family: DINNextLTPro-Bold;
						font-weight: bold;
						font-size: 31rpx;
						color: #FD3C33;
						line-height: 23rpx;
						padding-left: 14rpx;
					}
				}
			}
		}
	}

	.fxlist {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 50rpx;

		&__item {
			width: 25%;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 17rpx;

			&__icon {
				width: 74rpx;
				height: 74rpx;
				margin-bottom: 8rpx;
			}

			&__text {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 25rpx;
				color: #2C2C2C;
				line-height: 25rpx;
			}
		}
	}

	.qi {
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 25rpx;
		color: #979797;
		line-height: 25rpx;
		margin-left: 8rpx;
	}

	.unit {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 25rpx;
		color: #FD3C33;
		line-height: 25rpx;
	}

	.tabsc {
		width: 750rpx;
	}

	.tab {
		height: 110rpx;
		display: flex;
		align-items: center;

		&__item {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #313131;
			line-height: 28rpx;
			padding: 0 30rpx;
			white-space: nowrap;
		}

		.active {
			scale: 1.1;
			font-weight: bold;
		}
	}

	.projiectlist {
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.addr {
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
		line-height: 30rpx;
		width: 140rpx;
	}
</style>